<template>
	<view class="" :parseLrc='parseLrc'>
		<audio class="play_box" :src="require('@/assets/music.mp3')" controls ref="myAudio"></audio>
		<div class="lrc_box" ref="lrcBox">
			<ul class="lrc_list" ref="lrcList" :style="{ulStyle}">
				<li class="lrc_text" v-for="(val,index) in lrcArr" :key="index">
					{{val.word}}
				</li>
			</ul>
		</div>
	</view>
</template>

<script>
	import lrc from '@/js/data'

	export default {
		data() {
			return {
				lrc,
				lrcArr: [],
				lrcDomInfo: {},
				ulStyle: {
					transform: `translateY(0px)`
				},
				currentIndex: -1

			}
		},
		mounted() {
			this.parseLrc()
			this.setListenerEvent()
			// 初始化dom数据
			setTimeout(()=>{
				this.initDomData()
			},10)
			
		},
		methods: {
			initDomData() {
				const liRect = this.$refs.lrcList.children[0].getBoundingClientRect()
				const lrcBoxRect = this.$refs.lrcBox.getBoundingClientRect()
				this.lrcDomInfo.liHeight = liRect.height
				this.lrcDomInfo.lrcBoxRect = lrcBoxRect.height
			},
			setListenerEvent() {
				this.$refs.myAudio.addEventListener('timeupdate', ()=> {
					this.setUloffset()
				})
			},
			parseLrc() {
				// 歌词换行
				const lrcLine = this.lrc.split('\n')
				lrcLine.forEach(i => {
					// 分割时间和歌词
					const parts = i.split(']')
					const lrcObj = {
						time: this.parseTime(parts[0].substring(1)),
						word: parts[1]
					}
					// 加入时间和歌词
					this.lrcArr.push(lrcObj)
				})
				console.log(this.lrcArr)
			},
			parseTime(timeStr) {
				const parts = timeStr.split(':')
				timeStr = (+parts[0] * 60 + (+parts[1])).toFixed(2) /* 2为余数为2 */
				return timeStr
			},

			setUloffset() {
				this.showLrc()
				let height = this.lrcDomInfo.liHeight * this.currentIndex + this.lrcDomInfo.liHeight / 2 - this.lrcDomInfo.lrcBoxRect / 2
				if (height < 0) {
					height = 0
				}
				this.ulStyle.transform = `translateY(-${height}px)`
				console.log(height);
			},
			// 高亮
			showLrc(){
					this.findCurrentIndex()
					if(this.currentIndex<=-1){
						return
					}
					const oldLi = document.querySelector('.lrc_text_active')
					// 删除原来高亮显示
					oldLi?oldLi.classList.remove('lrc_text_active'):1
					const li = this.$refs.lrcList.children[this.currentIndex]
					// 添加高亮显示
					li.classList.add('lrc_text_active')
				},
				findCurrentIndex(){
						// 获取audio时间currentTime
						const currentTime = this.$refs.myAudio.currentTime
						for (let index in this.lrcArr) {
							const lrc = this.lrcArr[index]
							if(currentTime < lrc.time){
								this.currentIndex = index-1
								return
							}
						}
						this.currentIndex = this.lrcArr.length-1
					},


		}
	}
</script>

<style lang="scss">
	* {
		margin: 0px;
		padding: 0px;
	}

	body {
		text-align: center;
		background-color: #000000;
	}

	li {
		list-style: none;
	}

	.play_box {
		width: 100%;
		display: block;
		background-color: #000000;
		text-align: center;
	}

	.lrc_box {
		color: #666;
		height: calc(100vh - 120px);
		overflow: hidden;

		.lrc_list {
			transform: translateY(-50px);
			transition: all 0.3s;
			overflow: hidden;
		}

		.lrc_text {
			font-size: 18px;
			line-height: 18px;
			padding: 11px 0px;
		}

		.lrc_text_active {
			transform: scale(1.5);
			color: #ffffff;
			transition: all 0.3s;
		}
	}
</style>